<template>
    <div id="total-income" class="map-container" style="height:300px;" />
</template>
<script>
import echarts from 'echarts'
import countApi from '@/api/count'

export default {
    name: 'TotalIncome',
    mounted() {
        countApi.month_income().then(res => {
            // 对数据进行反转，使其按照月份顺序排列
            const monthData = res.data.month
            const dataAxis = []
            const data = []
            let total = res.data.total
            const max = total
            monthData.forEach(item => {
                dataAxis.push(item.month + '月')
                data.push(total)
                total -= item.num
            })
            dataAxis.reverse() // 反转数组
            data.reverse() // 反转数组
            const len = 12 - dataAxis.length
            for (let i = 0; i < len; i++) {
                dataAxis.push('-') // 在数组开头添加空字符串
                data.push(max) // 在数据数组开头添加0
            }
            this.initChart(dataAxis, data)
        })
    },
    methods: {
        initChart(xAxis, data) {
            const options = this.getConfigOptions(xAxis, data)
            const totalIncomeChart = echarts.init(document.getElementById('total-income'))
            totalIncomeChart.setOption(options)
        },
        getConfigOptions(xAxis, data) {
            // 折线图配置项
            return {
                tooltip: { // 提示框配置
                    trigger: 'axis', // 触发类型，axis表示坐标轴触发
                    axisPointer: { // 坐标轴指示器配置
                        type: 'shadow' // 指示器类型为阴影
                    }
                },
                legend: { // 图例配置
                    top: '5%', // 距离容器顶部5%
                    left: 'center' // 水平居中
                },
                title: { // 标题配置
                    text: '总收入', // 标题文本
                    bottom: 0, // 距离容器顶部20%
                    left: 'center' // 水平居中,
                    // textStyle: { // 标题文本样式
                    //     color: '#fff' // 颜色
                    // }
                },
                grid: { // 网格配置
                    top: '15%', // 距离容器顶部20%
                    left: '3%', // 距离容器左边3%
                    right: '4%', // 距离容器右边4%
                    bottom: '10%', // 距离容器底部3%
                    containLabel: true // 包含标签
                },
                xAxis: { // X轴配置
                    type: 'category', // 轴类型为分类轴
                    data: xAxis, // 数据
                    axisTick: { // 坐标轴刻度配置
                        alignWithLabel: true // 刻度线与标签对齐
                    }
                    // 配置坐标颜色
                    // axisLabel: { // 坐标轴标签配置
                    //     color: '#fff' // 颜色
                    // }
                },
                yAxis: { // Y轴配置
                    type: 'value' // 轴类型为数值轴
                },
                series: [{ // 系列列表
                    name: '总收入', // 系列名称
                    type: 'line', // 图表类型为折线图
                    data: data, // 数据
                    symbol: 'circle', // 标记符号为圆形
                    symbolSize: 8, // 标记大小为8
                    itemStyle: { // 图形样式
                        color: '#3398DB' // 颜色
                    }
                }]
            }
        }
    }
}
</script>
<style scoped>
.map-container {
    /* background: linear-gradient(180deg, #e9e9e9 0%, #aaa 100%); */
}
</style>
